<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<head>
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="../../../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../../css/animate.css" />
		<link rel="stylesheet" href="../../../css/font-awesome.css" />
		<link href="../../../css/plugins/jsTree/style.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../../../css/style.css" />
		<link rel="stylesheet" href="../../../js/plugins/layer/laydate/skins/default/laydate.css" />
	</head>
	<body class="gray-bg">
		<div class="wrapper wrapper-content " id="app">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-content">
							<form class="form-horizontal m-t" id="signupForm" autocomplete="off">
								<input id="userId" name="userId" type="hidden">
								<div class="form-group">
									<label class="col-sm-3 control-label">姓名：</label>
									<div class="col-sm-8">
										<input id="name" name="name" class="form-control" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">用户名：</label>
									<div class="col-sm-8">
										<input id="username" name="username" class="form-control" type="text" >
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">密码：</label>
									<div class="col-sm-8">
										<input id="password" name="password" class="form-control" type="password">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">部门：</label>
									<div class="col-sm-8">
										<input id="deptId" name="deptId" class="hidden"> <input id="deptName" name="deptName" class="form-control" type="text" style="cursor: pointer;" onclick="openDept()" readonly="readonly" placeholder="所属部门">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">E-mail：</label>
									<div class="col-sm-8">
										<input id="email" name="email" class="form-control" type="email">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">状态:</label>
									<div class="col-sm-8">
										<label class="radio-inline"> <input type="radio" name="status" value="1"/> 正常 </label>
										<label class="radio-inline"> <input type="radio" name="status" value="0"/> 禁用 </label>
									</div>
								</div>
								<input type="hidden" name="roleIds" id="roleIds">
								<div class="form-group">
									<label class="col-sm-3 control-label">角色</label>
									<div class="col-sm-8">
										<label v-for="role in roles" class="checkbox-inline i-checks">
                                    		{{role.roleName}}<input type="checkbox" :value="role.roleId" v-model="role.checked" style="margin-left: 1px;"/>
                                		</label>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-8 col-sm-offset-3">
										<button type="submit" class="btn btn-primary">提交</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../../js/jquery.min.js?v=2.1.4"></script>
	<script src="../../../js/bootstrap.min.js?v=3.3.6"></script>
	<script src="../../../js/plugins/validate/jquery.validate.min.js"></script>
	<script src="../../../js/plugins/validate/messages_zh.min.js"></script>
	<script src="../../../js/plugins/jsTree/jstree.min.js"></script>
	<script src="../../../js/plugins/chosen/chosen.jquery.js"></script>
	<script src="../../../js/plugins/layer/layer.js"></script>
	<script src="../../../js/content.js?v=1.0.0"></script>
	<script src="../../../js/ajax-util.js"></script>
	<script src="../../../js/vue.min.js"></script>
    <script src="../../../js/axios.min.js"></script>
    <script>
		var app = new Vue({
			el: '#app',
			data: {
				roles: '',
			},
            methods:{
			    initRoles:function () {
                    axios.get('/admin/role/list')
                        .then(function (res) {
                            app.roles = res.data;
                        }).catch(function (err) {
                        console.log(err)
                    });
                }
            },
            created:function(){
                this.initRoles();
            }
		});
	</script>
</html>